<template>
    <div class="main">
        <div class="title-info">
            <div class="user-info">
                <!-- <el-avatar :src="avatarurl" class="user-avatar">
                </el-avatar> -->
                <div class="user-avatar">
                    {{ username[0] }}
                </div>
                <div class="title">
                    <h1>{{ username }},开始您一天的工作吧！</h1>
                    <!-- <span> 今日晴，20℃ - 32℃！ </span> -->
                </div>
            </div>
            <div class="page-login--layer-time">
                {{ time }}
            </div>
        </div>

        <el-col :span="10">
            <el-card class="box-card" style="margin-top: 25px;padding:33px 0;">
                <div class="work">
                    <el-image :src="worksvgurl"></el-image>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8" style="margin-left:100px;">
            <div class="grid-content bg-purple">
                <el-card class="box-card" style="margin-top: 25px">
                    <div slot="header" class="clearfix">
                        <span>快捷导航</span>
                    </div>
                    <el-row>
                        <el-col :span="12" v-for="({ name, icon, path }, index) of navigators" :key="index"
                            style="padding: 0">
                            <el-card class="el-card-items" shadow="hover">
                                <div style="display: flex;align-items: center;flex-direction: column;cursor: pointer"
                                    @click="RouteLink(path)">
                                    <i :class="icon" class="icon-route"></i>
                                    <div style="text-align: center;font-size: 12px;margin-top: 20px">
                                        {{ name }}
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-col>
    </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
    name: "UserMainPanelIndex",
    components: {},
    data: function () {
        return {
            time: dayjs().format('HH:mm:ss'),
            username: "",
            avatarurl: "",
            worksvgurl: require('./../../../assets/svg-icons/icons/work.svg'),
            navigators: [
                {
                    name: '平台介绍',
                    icon: 'el-icon-s-opportunity',
                    path: '/desc',
                    color: 'rgb(225, 133, 37);',
                    toId: 'target1'
                },
                {
                    name: '意见反馈',
                    icon: 'el-icon-s-home',
                    path: '/contact',
                    color: 'rgb(31, 218, 202);',
                    toId: 'change'
                },
                {
                    name: '快速使用',
                    icon: 'el-icon-help',
                    path: '/evaluation',
                    color: 'rgb(191, 12, 44);',
                    toId: 'target2'
                },
                {
                    name: '测评报告',
                    icon: 'el-icon-picture-outline-round',
                    path: '/personal',
                    color: 'rgb(63, 178, 127);',
                    toId: 'classification'
                },
            ],
        }
    },

    props: {},
    mounted() {
        this.timeInterval = setInterval(() => {
            this.refreshTime()
        }, 1000)
    },
    created() {
        this.username = this.$store.state.User.name;
        if (this.$store.state.User.haslogin != true) {
            this.$message("未登录");
            this.$router.push({ path: "/" });
            return;
        }
    },
    methods: {
        refreshTime() {
            this.time = dayjs().format('HH:mm:ss')
        },
        RouteLink: function (path) {
            this.$router.push({
                path: path
            })
        }
    },
}
</script>

<style lang="less" scoped>
.user-info {
    display: flex;
    text-align: left;
    align-items: center;

    .user-avatar {
        width: 60px;
        height: 60px;
        line-height: 60px;
        display: inline-block;
        background: #f7fbfd;
        border-radius: 30px;
        font-size: 2em;
        text-align: center;
        line-height: 60px;
        color: #929d99;
    }

    .title {
        display: inline-block;
        padding: 0 0 0 15px;
        position: relative;
        top: -5px;

        h1 {
            font-size: 1.125rem;
            // font-weight: 500;
            line-height: 1.75rem;
        }

        span {
            font-size: 14px;
            color: rgba(0, 0, 0, .45);
        }
    }
}

.title-info {
    display: flex;
    text-align: center;

    .page-login--layer-time {
        font-size: 5em;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.28);
        // color: #f7fbfd;
        overflow: hidden;
        margin-left: 120px;
    }
}

.icon-route {
    font-size: 1.5em;
}
</style>